<template>
  <Title>
    <template v-slot:center>地址列表</template>
  </Title>
  <div class="address-box">

    <h3 v-show="list.length==0" style="text-align: center;margin-top: 200px">
      还没有地址信息，去添加吧！
    </h3>
    <div class="address-item">
      <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"

      />
    </div>
  </div>
</template>

<script>
import Title from "../../components/common/title/Title";
import {computed, onMounted, reactive, toRefs} from "vue";
import {useRouter} from 'vue-router'
import {getAddressList} from "../../network/address";

export default {
  components: {Title},
  setup() {
    const router = useRouter()
    const state = reactive({
      chosenAddressId: '1',
      list: []
    })
    onMounted(() => {
      getAddressList().then(res => {
        if (res.data.length == 0) {
          state.list = [];
          return
        }
        state.list = res.data.map(i => {
          // console.log(i.is_default)
          return {
            id: i.id,
            name: i.name,
            tel: i.phone,
            address: `${i.province} ${i.city} ${i.county} ${i.address}`,
            isDefault: !!i.is_default
          }
        })
        console.log(state.list)
        // console.log(state.list)
      })
    })
    const onAdd = () => {
      router.push({path: '/addressedit', query: {type: 'add'}})
    }
    const onEdit = (item) => {
      router.push({path: '/addressedit', query: {type: 'edit', addressId: item.id}})
    }
    const select = (item) => {
      router.push({path: '/createorder', query: {addressId: item.id}})
    }

    return {...toRefs(state), onAdd, onEdit, select}
  }

}
</script>

<style scoped lang="scss">
.address-box {
  padding: 45px 0 50px;
  //height: 300px;




}




</style>